<template>
	<div class="mine-shopsettle-list-wrap">
		<van-nav-bar title="水机核销二维码" left-arrow fixed @click-left="onClickLeft" />

		<div class="qr-box" v-if="payment_url" ref="canvasImg">
            <div class="qr_name">{{title}}</div>
			<vue-qr class="qr" :text="payment_url" ref="vueQr" :margin="0"></vue-qr>
			<!-- <div class="qr_code" v-if="code">No.{{ code }}</div> -->
		</div>

		<div class="qr-btn-box">
			<div class="qr-btn">长按保存二维码</div>
			<img class="qr-opacity" :src="imgUrl" alt="">
			<vue-qr class="qr-opacity" :text="payment_url" ref="vueQr" :margin="0"></vue-qr>
		</div>

	</div>
</template>
<script>
import VueQr from "vue-qr";
import html2canvas from 'html2canvas';
export default ({
	components: { VueQr },
	data() {
		return {
			payment_url: '',
			imgUrl: '',
			code: '',
            title:"水机"
		}
	},
	mounted() {
		window.scrollTo(0, 0)
		this.success()
	},
	methods: {
		async success() {
			const id = this.$route.query.id;
			const storeId = this.$route.query.storeId;
			await this.$http.get(`/store/manage/${storeId}/qrcode/${id}`).then(res => {
				this.payment_url = res.data.qr_url
                this.title=res.data.name
				let regex = /[?&]scode=([^&#]*)/;
				let match = res.data.qr_url.match(regex);
				this.code = match[1]
				this.$nextTick(() => {
					setTimeout(() => {
						this.createImage()

					}, 1000);

				})

			})
		},
		onClickLeft() {
			this.$router.back()
		},
		async createImage() {
			try {
				const canvas = await html2canvas(this.$refs.canvasImg) // 在这里，将需要转换成图片的部分作为参数传入html2canvas
				const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
				this.imgUrl = image;
			} catch (e) {
				throw new Error(e)
			}
		},
		//   审核通知
		onClickRight() {
			this.$router.back()
		},
	},
})
</script>
<style lang="scss">
.mine-shopsettle-list-wrap {
	min-height: 100vh;
	padding-top: 46px;
	background-color: #FFFFFF;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.van-hairline--bottom::after {
		display: none;
	}

	.qr-box {
		position: relative;
		width: 95%;
		margin: 0 auto;
		margin-top: .2rem;
		height: 6.7rem;
		display: flex;
		/* 使用 flexbox 布局 */
		flex-direction: column;
		/* 垂直排列内容 */
		align-items: center;
		/* 水平居中对齐 */
		justify-content: center;
		/* 垂直居中对齐 */
		// background: url("https://static.yujianhuawuyou.com/uploads/20241030/1730278262218_1098x1333.png") no-repeat center;
		background-size: cover;
	}
    .qr_name{
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: .32rem;
color: #333333;
// line-height: 22px;
text-align: center;
margin-top:1rem;
font-style: normal;
    }
	.qr_code{
		font-size: .28rem;
		position: absolute;
		// top: 5.3rem;
	}
	.qr {
		display: block;
		width: 3.2rem;
		height: 3.2rem;
		margin: auto;
		// margin-top: 2rem;
	}

	.qr-btn-box {
		position: relative;
		width: 6.06rem;
		height: 0.88rem;
		margin: auto;
		margin-top: 1rem;
	}

	.qr-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6.06rem;
		height: 0.88rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #FFFFFF;
		user-select: none;
		border-radius: 0.44rem;
		background: linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%);
	}

	.qr-opacity {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		width: 6.06rem;
		height: 0.88rem;
		opacity: 0;
	}
}
</style>